<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>
    <el-descriptions border :column="column">
      <el-descriptions-item
        label="卡类资产"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >3 张</el-descriptions-item
      >
      <el-descriptions-item
        label="普通余额"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ fenToYuan(wallet.totalExpense || 0) }}</el-descriptions-item
      >
      <el-descriptions-item
        label="赠送余额"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ fenToYuan(wallet.totalExpense || 0) }}</el-descriptions-item
      >
      <el-descriptions-item
        label="会员余额"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ fenToYuan(wallet.balance || 0) }}</el-descriptions-item
      >
      <el-descriptions-item
        label="赠送余额"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ fenToYuan(wallet.totalExpense || 0) }}</el-descriptions-item
      >
      <el-descriptions-item
        label="可用积分"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ user.totalPoint || 0 }}
      </el-descriptions-item>

      <el-descriptions-item
        label="消费欠款"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ fenToYuan(wallet.totalExpense || 0) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="卡类欠款"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
      >
        {{ fenToYuan(wallet.totalExpense || 0) }}</el-descriptions-item
      >
      <el-descriptions-item
        label="剩余欠款/率"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
      >
        25620 / 56.23%</el-descriptions-item
      >
    </el-descriptions>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as WalletApi from '@/api/pay/wallet/balance'
import { fenToYuan } from '@/utils'

import * as UserApi from '@/api/member/user'

const { user, wallet } = defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>()
import { useHook } from './hook'
const { matchMedia } = useHook()
const column = ref(6)
const matchType = ref('xl')
const labelWidth = ref(70)

const setColumn = () => {
  const type = matchMedia()
  matchType.value = type
  if (type == 'xs') {
    column.value = 1
  } else if (type == 'sm') {
    column.value = 3
  } else if (type == 'md') {
    column.value = 3
  } else if (type == 'lg') {
    column.value = 3
    labelWidth.value = 150
  } else if (type == 'xl') {
    column.value = 3
    labelWidth.value = 70
  }
}
window.onresize = () => {
  setColumn()
}
onMounted(() => {
  setColumn()
})
</script>
